import {
  getAllMenus,
  MenuData,
  addMenu,
  removeMenuById,
  updateMenuById,
  updateBulkMenu as updateBulkMenuApi
} from "@/api/menu"
import { getRoleAccessByRoles } from "@/api/roleAccess"
import { generateTree, ITreeItemDataWithMenuData } from "@/utils/generateTree"
// 2. 树形数据的 接口 **注意他是递归的形式**
export interface ITreeItemData extends MenuData {
  children?: ITreeItemData[]
  meta?: {
    icon: string
    title: string
    [key: string]: string
  }
}
// 3. state 的 ts 接 口
export interface IMenuState {
  menuList: Array<MenuData>
  menuTreeData: ITreeItemData[]
  authMenuList: MenuData[]
  authMenuTreeData: ITreeItemDataWithMenuData[]
}

export const useMenuStore = defineStore("menu", () => {
  const state = reactive<IMenuState>({
    // 1. 后台返回的扁平化菜单 menuList, 和 menuList 格式化后的生成数形结构 menuTreeData
    menuList: [],
    //  menuList 格式化后的生成数形结构
    menuTreeData: [],
    // 菜单权限 1. 扁平化菜单
    authMenuList: [],
    // 菜单权限 2. authMenuList 格式化后的生成数形结构，会用该数据生成菜单
    authMenuTreeData: []
  })
  // 4. 获取所有菜单，函数，请求 menuList 返回 menuList 格式化后的生成数形结构
  const getAllMenuList = async () => {
    // 请求 所有 菜单
    const res = await getAllMenus()
    if (res.code == 0) {
      const { data } = res
      state.menuList = data
      // 把 menuList 格式化后的生成 menuTreeData 树形结构
      state.menuTreeData = generateTree(data)
    }
  }
  // 5. 增加菜单
  const appendMenu = async (data: ITreeItemData) => {
    const res = await addMenu(data)
    // res.code == 0 表示请求成功
    if (res.code == 0) {
      const node = { ...res.data }
      state.menuList.push(node)
      // 把 menuList 格式化后的生成 menuTreeData 树形结构
      state.menuTreeData = generateTree(state.menuList)

      return true
    }
  }
  // 6. 删除菜单
  const removeMenu = async (data: ITreeItemData) => {
    const res = await removeMenuById(data.id)
    // res.code == 0 表示请求成功
    if (res.code == 0) {
      const idx = state.menuList.findIndex((menu) => menu.id === data.id)
      state.menuList.splice(idx, 1)
      // 把 menuList 格式化后的生成 menuTreeData 树形结构
      state.menuTreeData = generateTree(state.menuList)
      return true
    }
  }
  // 7. 批量修改菜单 这里只支持父级菜单**拖拽排序**
  const updateBulkMenu = async () => {
    // 1. 更新sortId
    state.menuTreeData.forEach((menu, idx) => (menu.sort_id = idx))
    // 2. 删除子节点
    const menus = state.menuTreeData.map((menu) => {
      const temp = { ...menu }
      delete temp.children
      return temp
    })
    // 3. 批量更新 顶级节点
    const res = await updateBulkMenuApi(menus)
    if (res.code == 0) {
      return true
    }
  }
  // 8. 更新菜单
  const updateMenu = async (data: Partial<MenuData>) => {
    const res = await updateMenuById(Number(data.id), data)
    // res.code == 0 表示请求成功
    if (res.code === 0) {
      await getAllMenuList()
      return true
    }
  }
  // 菜单权限 3. 超级管理员，请求远程获取可以访问的路由 函数
  const getAllMenuListByAdmin = async () => {
    // 获取远程菜单
    const res = await getAllMenus()
    if (res.code == 0) {
      const { data } = res
      state.authMenuList = data
      // 生成 带 meta 树形结构
      state.authMenuTreeData = generateTree(data, true)
    }
  }
  // 菜单权限 4. 不是超级管理员，请求远程 获取角色对应远程路由 函数
  const getMenuListByRoles = async (roles: number[]) => {
    // 获取角色对应远程路由
    const res = await getRoleAccessByRoles(roles)
    if (res.code == 0) {
      const { data } = res
      const access = data.access
      state.authMenuList = access
      // 生成 带 meta 树形结构
      state.authMenuTreeData = generateTree(access, true)
    }
  }
  return {
    getAllMenuList,
    state,
    appendMenu,
    removeMenu,
    updateBulkMenu,
    updateMenu,
    getAllMenuListByAdmin,
    getMenuListByRoles
  }
})
